<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span style="font-size: 1.5rem;">{{ product.modelName }}</span>
                <el-button class="button" @click="setModelIDToCookie(product.modelID);">选择</el-button>
            </div>
        </template>
        <div class="text item">{{ product.modelDescription }}</div>
        <div class="footer-content">
            <div>
                <el-icon style="width: 30px; height: 30px;">
                    <StarFilled style="color: yellow;" />
                </el-icon>
                <span class="foot-text" style="color: yellow;">{{ product.modelStars }}</span>
                <el-icon style="width: 30px; height: 30px;">
                    <View style="color: orange;" />
                </el-icon>
                <span class="foot-text" style="color: orange;">{{ product.modelHot }}</span>
            </div>
            <div>
                <span class="text-writer">{{ product.writer }}</span>
            </div>
        </div>
    </el-card>
</template>

<script setup lang="ts">

interface SavedData {
    modelID: number;
    modelName: string;
    modelDescription: string;
    modelPrice: number;
    modelStars: number;
    modelHot: boolean;
    writer: string;
}

defineProps<{
    product: SavedData
}>()

function setModelIDToCookie(id: number) {
    const expiryDate = new Date();
    expiryDate.setDate(expiryDate.getDate() + 1); // Cookie will expire in 1 day
    document.cookie = `modelID=${id}; expires=${expiryDate.toUTCString()}; path=/`;
    window.location.href = "/chat";
}
</script>

<style scoped>
@media (prefers-color-scheme: light) {

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1.5rem;
        color: #333;
        /* Brighter for contrast */
    }

    .card-header span {
        /* Typography improvements */
        font-size: 1.5rem;
        color: #333;
        /* Brighter for contrast */
        /* ... other properties ... */
    }

    .text {
        font-size: 1.1rem;
    }

    .item {
        margin-bottom: 18px;
    }

    .box-card {
        width: 320px;
        height: calc(320px *0.618);
        margin-top: 10%;
        position: relative;
        background-color: #ffffff10;
        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
        border-width: 0;
        color: #333;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
        border-radius: 10px;
        background-color: wheat;


    }

    .footer-content {
        position: absolute;
        right: 0;
        bottom: 0;
        color: #333;
        font-size: 1rem;
        text-align: right;

    }

    .foot-text {
        margin-right: 15px;
    }

    .text-writer {
        margin-right: 15px;
        color: darkgray;
    }

    .button {
        /* Button aesthetics */
        padding: 10px 20px;
        border-radius: 5px;
        background-color: #333;
        /* A vibrant color */
        color: #fff;
        /* Transitions for interactivity */
        transition: background-color 0.3s ease;
    }

    .button:hover {
        background-color: #000;
        /* A darker shade on hover */
    }
}

@media (prefers-color-scheme: dark) {

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1.5rem;
        color: #EFEFEF;
        /* Brighter for contrast */
    }

    .card-header span {
        /* Typography improvements */
        font-size: 1.5rem;
        color: #EFEFEF;
        /* Brighter for contrast */
        /* ... other properties ... */
    }

    .text {
        font-size: 1.1rem;
    }

    .item {
        margin-bottom: 18px;
    }

    .box-card {
        width: 320px;
        height: calc(320px *0.618);
        margin-top: 10%;
        position: relative;
        background-color: #ffffff10;
        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
        border-width: 0;
        color: white;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
        border-radius: 10px;
        background-color: #ffffff10;


    }

    .footer-content {
        position: absolute;
        right: 0;
        bottom: 0;
        color: white;
        font-size: 1rem;
        text-align: right;

    }

    .foot-text {
        margin-right: 15px;
    }

    .text-writer {
        margin-right: 15px;
        color: darkgray;
    }

    .button {
        /* Button aesthetics */
        padding: 10px 20px;
        border-radius: 5px;
        background-color: #FFC107;
        /* A vibrant color */
        color: #333;
        /* Transitions for interactivity */
        transition: background-color 0.3s ease;
    }

    .button:hover {
        background-color: #FFA000;
        /* A darker shade on hover */
    }
}

.pagination {
    margin-top: 20px;
}</style>
